<template>
	<div class="cate-today">
		<!-- <img src="../../assets/img/cate-today1.png" alt="" class="headImg"> -->
		<div class="content" v-for="ts in tagsGroup">
			<div class="title">
				{{ts.tag_name}}
			</div>
			<div class="top-other">
				<el-carousel :interval="5000" arrow="always" height="25.19rem" indicator-position="outside">
					<el-carousel-item v-for="items in ts.count" :key="items + 1">
						<!-- <div class="goods-item" v-for="item in 2" :key="item"> -->
						<div v-for="(t, index) in ts.goods" :key="t.pid">
							<img v-if="index < items * 4 && index >= (items - 1) * 2" :src="t.defaultAlbum"
								class="goods-item" alt="" @click="toBuy(t)">
						</div>
						<!-- </div> -->
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "",
		components: {},
		props: {
			dataId: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				today: [],
				count: 0,
				tags:[],
				tagsGroup:'',
				list:[]
			};
		},
		mounted() {
			// this.getData(this.dataId)
		},
		methods: {
			toBuy(item) {
				this.$router.push({
					path: "/fruit/detail?id=" + item.pid
				});
			},
			getData(id) {

				this.today = [];
				let data = {
					queryCondition: {
						order: [{
							fieldname: "iOrder",
							direction: "asc",
						}, ],
						pageindex: 1,
						pagesize: 10000,
						where: [{
								fieldname: "categoryid",
								valuefrom: id,
							}
							
						],
					},
				};
				this.$api.home.getProductList(data).then((res) => {
					if (res.code == 200) {
						console.log('111', res)
						let temp = []
						this.list = this.list.concat(res.data.data)
						this.list.forEach(item=>{
							if(item.lsUpTags){
								item.lsUpTags.forEach(ind=>{
									if(temp.length>0){
										if(temp.indexOf(ind) != -1){
											temp.push(ind)
										}
									}else{
										temp.push(ind)
									}
									
								})
							}
						})
						this.tagsGroup = temp
						let goods = []
						this.tagsGroup.forEach(item=>{
							this.list.forEach(ind=>{
								if(ind.lsUpTags){
									ind.lsUpTags.forEach(dd=>{
										if(item.id == dd.id){
											goods.push(ind)
										}
										
									})
								}
									
							})
							this.$set(item,"goods",goods)
							this.$set(item,"count",Math.ceil(goods.length / 2))
						})
						// this.count = Math.ceil(this.today.length / 2);
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	.cate-today {
		display: flex;
		flex-direction: column;
		position: relative;
		margin-top: 2.19rem;
		height: 42.5rem;

		.headImg {
			width: 100%;
			object-fit: contain;
			cursor: pointer;
			position: absolute;
			z-index: 0;
		}

		.content {
			// position: absolute;
			z-index: 1;
			padding: 0 16.19rem;
			margin-top: 2.19rem;
			display: flex;
			flex-direction: column;

			.title {
				width: 11.25rem;
				height: 3.44rem;
				background: rgba(0, 0, 0, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 1.5rem;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(234, 234, 234, 1);
				margin-bottom: 4.88rem;
			}

			.top-other {
				margin-top: 1.25rem;
				margin-bottom: 1.25rem;

				.el-carousel__item {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.goods-item {
						width: 20.94rem;
						height: 100%;
						background: #fff;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;
						position: relative;
						margin-right: 1.19rem;
						cursor: pointer;

						&:nth-child(4n) {
							margin-right: 0;
						}

						.goods-img {
							width: 15rem;
							height: 15rem;
							object-fit: contain;
						}

						.top-img {
							width: 3.94rem;
							height: 3.94rem;
							position: absolute;
							top: 1.25rem;
							left: 1.56rem;
							text-align: center;
							line-height: 3.94rem;
							color: #fff;
							font-size: 2.5rem;
						}

						.goods-info {
							display: flex;
							flex-direction: column;
							text-align: center;
							padding: 0 1rem;

							.name {
								font-size: 1.13rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(4, 0, 0, 1);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 18rem;
							}

							.price {
								font-size: 1.5rem;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(243, 64, 111, 1);
								margin-top: 0.94rem;
							}
						}
					}
				}
			}

			.el-carousel__indicators--outside {
				white-space: nowrap;
			}

			.el-carousel__indicator--horizontal {
				// width: 25%;
				margin-top: 2.13rem;
				padding: 0;

				.el-carousel__button {
					// width:0.63rem;
					position: relative;
					width: 21.8rem;
					height: 0.13rem;
					background: #000;
				}

				&.is-active {
					.el-carousel__button {
						// width:2.69rem;
						height: 0.13rem;
						background: #f3406f;
						position: relative;
						// border-bottom: 0.31rem solid #f3406f;
						// top: 0.1rem;
					}
				}
			}
		}
	}
</style>
